<template>
  <div class="loading" v-show="show">
    <div class="circle"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: false
    }
  }
}
</script>

<style lang="scss" scoped>
@keyframes move {
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}
.loading{
  position: fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background-color: rgba(0,0,0,.6);
  z-index:100;
}
.circle{
  width: 30px;
  height:30px;
  border: 5px solid #fc7;
  position:fixed;
  border-radius: 20px;
  z-index:1000;
  top: 50%;
  left:50%;
  margin-top: -20px;
  margin-left:-20px;
  border-left-color: transparent;
  animation: move 1s infinite;
}
</style>
